<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <!-- 一般用来控制表单元素 -->
        <!-- 不同的表单元素，生效的效果又不一样 -->
        <input type="text" v-model="msg"><span>{{msg}}</span>

        <input type="checkbox" v-model="a"><span>{{a}}</span>

        <input type="checkbox" v-model="b" name="hobby" value="篮球">
        <input type="checkbox" v-model="b" name="hobby" value="足球">
        <input type="checkbox" v-model="b" name="hobby" value="乒乓球"><span>{{b}}</span>

        <select v-model="c">
            <option value="上海">沪</option>
            <option value="北京">京</option>
            <option value="杭州">杭</option>
        </select>
        <span>{{c}}</span>

        <input type="radio" value="男" name="sex" v-model="d">
        <input type="radio" value="女" name="sex" v-model="d">
        <span>{{d}}</span>

        <!-- 表单的修饰符 -->
        <input type="text" v-model.trim="str1"><span>{{str1.length}}</span>
        <input type="text" v-model.lazy="str2"><span>{{str2}}</span>
        <input type="number" v-model.number="num"><span>{{typeof num}}</span>
    </div>
</body>
<script src="./libs/vue.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                msg:"hello",
                a:false,
                b:[],
                c:"",
                d:"",
                str1:"",
                str2:"",
                num:0
            }
        }
    })
</script>
</html>